<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>swiper加animate效果</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
<audio preload autoplay src="music/全城双闪《从你的全世界路过》插曲.mp3" autoplay loop></audio>
		<div class="web">
			

			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide page page1">
						<div class="tup"><img class="ani" swiper-animate-effect="daren" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s" src="img/o_1bnndb1ac1f021kt9n2n1cctm6t3u.png"/></div>
						<h1 class="ani" swiper-animate-effect="zi" swiper-animate-duration="1.5s" swiper-animate-delay="1s">单身有约</h1>
						<h3 class="ani" swiper-animate-effect="zit" swiper-animate-duration="1.5s" swiper-animate-delay="1.9s">tan90°</h3>
						<div class="ani shu" swiper-animate-effect="shu" swiper-animate-duration="1.5s" swiper-animate-delay="1.9s" >别想了，你永远都是单身狗</div>
						<div class="ani shu2" swiper-animate-effect="shu2" swiper-animate-duration="1.5s" swiper-animate-delay="3s">你需要以下建议来摆脱自己单身的情况</div>
						
					</div>
					<div class="swiper-slide page page2">
						<h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">来场浪漫的约会</h2>
						<div class="ani rc" swiper-animate-effect="rc" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">别发梦了，起床打代码了。</div>
						<div class="ani lc" swiper-animate-effect="lc" swiper-animate-duration="1.5	s" swiper-animate-delay="0.2s"><img src="img/zz.jpg"/></div>
					</div>
					<div class="swiper-slide page page3">
						<h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">来蓝景学会代码后</h2>
						<h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">从这样子</h3>
						<div class="ani lc" swiper-animate-effect="lc" swiper-animate-duration="1.5	s" swiper-animate-delay="0.2s"><img src="img/za.jpg"/></div>
						<h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">变成这样子</h3>
						<div class="ani tup" swiper-animate-effect="rc" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"><img src="img/xx.jpg"/></div>
					</div>
					<div class="swiper-slide page page4">
						<h3 class="ani" swiper-animate-effect="rc" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">为什么做程序员能脱单？</h3>
						<h3 class="ani" swiper-animate-effect="lc" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s">因为我们够细心和耐心</h3>
						<h3 class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.38s">最可怕的是我们够专一</h3>
						<div class="ani tup" swiper-animate-effect="rc" swiper-animate-duration="1.5s" swiper-animate-delay="2s"><img src="img/zy.jpg"/></div>
						<h3 class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3s">你看我的背景色和字色都很专一就知道了</h3>
					</div>
					<div class="swiper-slide page page5">
						<h3 class="ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">还不快报名参加？</h3>
						<div class="ani tb" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s"><input type="text" name="" id="" value="" placeholder="姓名" /></div>
						<div class="ani tb" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.2s"><input type="text" name="" id="" value="" placeholder="联系方式" /></div>
						<div class="ani but" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s"><input type="button" name="" id="" value="提交" /></div>
						<div class="ani tupp" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="2.8s"><img src="img/cc.jpg"/></div>
					</div>
				</div>
			</div>

		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/swiper-3.4.2.min.js" type="text/javascript"></script>
		<!--引入swiper的animate脚本-->
		<script src="js/swiper.animate1.0.2.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
				
			})
			document.body.style.height = window.innerHeight + "px";
			/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				// 字体大小  =1个rem单位表示多少个像素*(设备宽度    /  设计图宽度)
			}
			
		</script>
	</body>

</html>